
<div class="close-dialog">
    <button mat-icon-button="" (click)="onClose()">
        <mat-icon>close</mat-icon>
    </button>
</div>

<div class="preferences-window">
    <h1 mat-dialog-title>{{'Wallet.Preferences.Title' | translate}}</h1>
    <div mat-dialog-content>
        <div class="wallet-name-field">
            <mat-form-field appearance="outline">
                <mat-label>{{'Wallet.Preferences.WalletName' | translate}}</mat-label>
                <input matInput placeholder="Name" [(ngModel)]="walletName" (ngModelChange)="nameChanged()">
            </mat-form-field>

            <mat-form-field appearance="outline">
                <mat-label>{{'Wallet.Preferences.WalletColor' | translate}}</mat-label>
                <mat-select placeholder="Color" [(ngModel)]="colorIndex" (selectionChange)="colorChanged()" class="settings-list">
                    <mat-select-trigger>
                        <div fxLayout="row" fxLayoutAlign="start center">
                            <div fxFlex="8">
                                <mat-icon fxFlex="8" [ngStyle]="{'color': colorIndex.color}" aria-disabled="true">fiber_manual_record</mat-icon>
                            </div>
                            <div fxFlex="">{{colorIndex.name}}</div>
                        </div>
                    </mat-select-trigger>

                    <mat-option *ngFor="let item of colorsList" [value]="item">
                        <div fxLayout="row" fxLayoutAlign="start center">
                            <div fxFlex="8">
                                <mat-icon fxFlex="8" [ngStyle]="{'color': item.color}" aria-disabled="true">fiber_manual_record</mat-icon>
                            </div>
                            <div fxFlex="">{{item.name}}</div>
                            <span fxFlex></span>
                            <div class="color-checked">
                                <mat-icon [ngStyle]="{'color': item.color}" *ngIf="colorIndex.id == item.id">check</mat-icon>
                            </div>
                        </div>
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field appearance="outline" *ngIf="!isEmptyList">
                <mat-label>{{'Wallet.Preferences.FilterTokens' | translate}}</mat-label>
                <mat-select [(ngModel)]="selectedTokens" (selectionChange)="filterTokenChanged()" class="settings-list" [multiple]="true">
                    <mat-option *ngFor="let item of listTokens" [value]="item.id">
                        <span class="select-token-id">[{{ item.id }}]</span>
                        {{ item.name }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <div class="trx-only">
                <mat-slide-toggle [(ngModel)]="balanceHidden" color="primary" (change)="toggleBalanceHidden()">
                    {{'Wallet.Preferences.HideBalance' | translate}}
                </mat-slide-toggle>
            </div>
        </div>
    </div>
</div>
